import React from 'react';
import PropTypes from 'prop-types';
import Button from './Button';

export default function BorderButton(props) {
    const {disabledContainerStyle, disabled, styleDisabled} = props;
    return <Button
        disabled={disabled}
        onPress={props.onPress}
        styleDisabled={styleDisabled}
        disabledContainerStyle={disabledContainerStyle}
        containerStyle={{
            height: props.height,
            borderRadius: props.borderRadius || (props.height / 2),
            borderWidth: 0.5,
            borderColor: props.borderColor,
            justifyContent: 'center',
            ...props.containerStyle,
        }}
        style={{
            fontSize: props.fontSize,
            color: props.color,
            ...props.style,
        }}>
        {props.title || props.children}
    </Button>;
}

BorderButton.propTypes = {
    ...Button.propTypes,
    height: PropTypes.number,
    borderRadius: PropTypes.number,
    fontSize: PropTypes.number,
    borderColor: PropTypes.string,
    color: PropTypes.string,
    title: PropTypes.string,
};

BorderButton.defaultProps = {
    height: 44,
    borderColor: '#2992E3',
    fontSize: 14,
    color: '#2992E3',
};
